<template>
  <a-modal :visible="visible" title="预览详细日志" width="1352px" :footer="null" :destroyOnClose="true" @cancel="handleCancel">
    <a-tabs class="!-my-6 tabs" v-model:activeKey="state.activeKey" :destroyInactiveTabPane="true">
      <a-tab-pane key="1" tab="档案生命周期">
        <template v-if="state.activeKey === '1'">
          <DynamicTable :tables="dyTable" :config="dyTableConfig1" v-if="state.activeKey === '1'" />
        </template>
      </a-tab-pane>

      <a-tab-pane key="2" tab="迁移记录">
        <template v-if="state.activeKey === '2'">
          <DynamicTable :tables="dyPrintTable" :config="dyTableConfig2" />
        </template>
      </a-tab-pane>

      <a-tab-pane key="3" tab="盘点记录">
        <template v-if="state.activeKey === '3'">
          <DynamicTable :tables="dyCheckTable" :config="dyTableConfig3" />
        </template>
      </a-tab-pane>

      <a-tab-pane key="4" tab="借阅记录">
        <template v-if="state.activeKey === '4'">
          <DynamicTable :tables="dyBorrowTable" :config="dyTableConfig4" />
        </template>
      </a-tab-pane>

      <a-tab-pane key="5" tab="操作记录">
        <template v-if="state.activeKey === '5'">
          <DynamicTable :tables="dyOperateTable" :config="dyTableConfig5" />
        </template>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts" setup>
import { DynamicTable } from '@/components/public-template';
import { Api } from '@/config/api/logManage';
import { reactive } from 'vue';
import indexService from './logDetail.service';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  rowId: {
    type: String,
    required: true,
    default: ''
  }
});
const emit = defineEmits(['update:visible']);
const state = reactive({
  activeKey: '1'
});

const dyTable = reactive(indexService.getTables());
const dyTableConfig1 = {
  queryUrl: Api.lifeCyclePage,
  protType: 'post',
  params: { fileId: props.rowId },
  noPagination: true
};

const dyPrintTable = reactive(indexService.getPrintTables());
const dyTableConfig2 = {
  queryUrl: Api.transferRecord,
  protType: 'post',
  params: { fileId: props.rowId },
  noPagination: true
};

const dyCheckTable = reactive(indexService.getCheckTables());
const dyTableConfig3 = {
  queryUrl: Api.inventoryRecord,
  protType: 'post',
  params: { fileId: props.rowId },
  noPagination: true
};

const dyBorrowTable = reactive(indexService.getBorrowTables());
const dyTableConfig4 = {
  queryUrl: Api.borrowRecord,
  protType: 'post',
  params: { fileId: props.rowId },
  noPagination: true
};

const dyOperateTable = reactive(indexService.getOperateTables());
const dyTableConfig5 = {
  queryUrl: Api.optRecord,
  protType: 'post',
  params: { fileId: props.rowId },
  noPagination: true
};

const handleCancel = () => {
  state.activeKey = '1';
  emit('update:visible', false);
};
</script>

<style lang="less" scoped>
.tabs {
  padding-bottom: 60px;
}
</style>
